<template>
  <div class="recommend">
    <div class="recommend-title">为您推荐</div>
    <div class="w-goods-content">
      <div class="w-goods-list">
        <div class="w-goods-item" v-for="(item,i) in infoRec" :key="i" @click="goPage(item.id)">
          <div class="w-goods-item-inner">
            <img :src="item.logo" alt>
            <div class="w-goods-item-name">{{item.titile}}</div>
            <div class="w-goods-item-price">
              <span>¥{{item.price}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["infoRec"],
  methods: {
    goPage(id) {
      this.$router.push({
        path: "/detail",
        query: { id: id }
      });
    }
  }
};
</script>

<style lang="scss">
.recommend {
  padding: 0 48px;
  background: #fff;
  .recommend-title {
    line-height: 120px;
    font-size: 36px;
    font-weight: 500;
    color: #333333;
  }
  .w-goods-content {
    flex: 1;
  }
  .w-goods-item {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    height: 490px;
    border-top: 2px solid #e5e2e2;

    .w-goods-item-inner {
      width: 320px;
      height: 320px;
      margin: 0 auto;
    }
    img {
      margin: 20px 0 16px 0;
      width: 100%;
      height: 238px;
    }
    .w-goods-item-name {
      font-size: 28px;
      line-height: 0px;
      font-weight: 500;
    }
    .w-goods-item-name,
    .w-goods-item-price {
      padding-left: 32px;
      line-height: 60px;
    }
    .w-goods-item-price {
      font-size: 28px;
      color: #d0021b;
      span:nth-child(2) {
        color: #9b9b9b;
        margin-left: 36px;
        text-decoration-line: line-through;
      }
    }
  }
  .w-goods-item:nth-child(odd) {
    border-right: 2px solid #e5e2e2;
  }
  .w-goods-item:nth-child(even) {
    margin-left: -2px;
  }
}
</style>
